<template>
  <div>
    <div>
    <el-button-group class='arrow-container'>
      <el-button text><img :src='UpToTop' :width='20' :height='20'>
        <span class='arrow-word'>置顶</span></el-button>
      <el-button text><img :src='ArrowUp' :width='20' :height='20'>
        <span class='arrow-word'>上移</span></el-button>
      <el-button text><img :src='ArrowDown' :width='20' :height='20'>
        <span class='arrow-word'>下移</span></el-button>
      <el-button text><img :src='DownToBottom' :width='20' :height='20'>
        <span class='arrow-word'>置底</span></el-button>
    </el-button-group>
    </div>

    <div>
      <el-table :data="tableData" border @cell-dblclick='handleCellDblClick'>
        <el-table-column type="index" />
        <template v-for="(item, index) in styleData" :key="index">
          <el-table-column :prop="item.fieldName" :label="item.label" :width="item.width">

            <template #default="scope">
              <template v-if="dblId === scope.row.id">
                <el-input v-model="scope.row[item.fieldName]"></el-input>
              </template>
              <span v-else>{{scope.row[item.fieldName]}}</span>
            </template>

          </el-table-column>
        </template>
        <el-table-column width="auto"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import ArrowDown from '../assets/icon/arrow/arrow_down.png'
import ArrowUp from '../assets/icon/arrow/arrow_up.png'
import DownToBottom from '../assets/icon/arrow/down_to_bottom.png'
import UpToTop from '../assets/icon/arrow/up_to_top.png'
import store from '../store'

const tableData = ref([])
const styleData = ref([])
const dblId = ref(0)

const refresh = () => {
  tableData.value = store.state.staffStyle
  styleData.value = store.state.tableStyle
}

const handleCellDblClick = (row) => {
  dblId.value = row.id
}

refresh()
</script>